<template>
	<view class="content" :style="{height: height}" >
		<!-- #ifdef APP-PLUS || H5 -->
		<view @click="echarts.onClick" :style="{height: height}" :setting="setting" :msg="222" :change:setting="echarts.updateEcharts" :id="'echarts'+id" class="echarts"></view>
		<!-- #endif -->
		<!-- #ifndef APP-PLUS || H5 -->
		<view>非 APP、H5 环境不支持</view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		props:["option", "height"],
		data() {
			let idStr = Date.now().toString(36)
			idStr += Math.random().toString(36).substr(3)
			return {
				id : idStr,
				setting: {"option": this.option, "id": idStr, investment: [], investmentSum: [] , investmentPer:[]},
				investment: [],
				investmentSum: [],
				investmentPer: [],
			}
		},
		async mounted() {
			if(this.option) {
				let investment  = [], investmentSum = []
				if(this.option.tooltip&&'function' == typeof this.option.tooltip.formatter) {
					await this.getInvestment()
					investment = this.investment
					investmentSum = this.investmentSum
					investmentPer = this.investmentPer
					this.setting = {"option": this.option, "id": this.id, "investment": investment, "investmentSum": investmentSum,"investmentPer":investmentPer}
				}
			}
		},
		methods: {
			onViewClick(options) {
				this.$emit('onClickEvent', options)
			},
			getInvestment() {
				const _this = this
				return new Promise(resolve => {
					_this.$api.statistics.ProjectprogressStatistics().then(res => {
						if (res&&0 == res.code) {
							_this.investment = res.data[5]
							_this.investmentSum  = res.data[6]
							_this.investmentPer = res.data[7]
							resolve()
						}
					})
				})
			}
		},
		watch: {
			option: async function(newVal, oldVal) {
				let investment  = [], investmentSum = [] , investmentPer = []
				if(newVal.tooltip&&'function' == typeof newVal.tooltip.formatter) {
					await this.getInvestment()
					investment = this.investment
					investmentSum = this.investmentSum
					investmentPer = this.investmentPer
				}
				this.setting = {"option": newVal, "id": this.idStr, "investment": investment, "investmentSum": investmentSum,"investmentPer":investmentPer}
			}
		}
	}
</script>

<script module="echarts" lang="renderjs">
	let myChart
	export default {
		mounted() {
			if (typeof window.echarts === 'function') {
				this.initEcharts.bind(this)
			} else {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				script.src = './static/js/echarts.min.js'
				script.onload = this.initEcharts.bind(this)
				document.head.appendChild(script)
			}
		},
		methods: {
			initEcharts() {
				const _this = this
				myChart = echarts.init(document.getElementById('echarts'+this.setting.id))
				myChart.on('click', function(params) {
				})
				let option = this.setting.option
				if (option.investment) {
					const investment = this.setting.investment
					const investmentSum = this.setting.investmentSum
					const investmentPer = this.setting.investmentPer
					option.tooltip.formatter = function (datas, index) {
						let html =
							'<table style="width:100%;" cellpadding="2" cellspacing="0" align="lete" border="0" class="ke-zeroborder" bordercolor="#000000">' +
							'<tbody>' +
							'<tr>' +
							'<td>' +
							datas[0].name +
							'</td>' +
							'</tr>' +
							'<tr>' +
							'<td>' +
							'2022年计划&nbsp;'+
							datas[1].value +
							'</td>';
							if(investmentPer[datas[0].dataIndex] !== 'error'){
							html +='<td>' +
								'<span>预计增速指标&nbsp; ' +
								investmentPer[datas[0].dataIndex] +
								'</span><br />' +
								'</td>'
							}
							 
							 html+=
							'</tr>' +
							'<tr>' +
							'<td>' +
							'<span style="margin-right: 12px">2022年完成&nbsp; ' +
							datas[2].value +
							'</span><br />' +
							'</td>' +
							'<td>' +
							'<span>2022年累计完成&nbsp; ' +
							datas[4].value +
							'</span><br />' +
							'</td>' +
							'</tr>' +
							'<tr>' +
							'<td>' +
							'<span style="margin-right: 12px">2021年完成&nbsp; ' +
							datas[0].value +
							'</span><br />' +
							'</td>' +
							'<td>' +
							'<span>2021年累计完成&nbsp; ' +
							datas[3].value +
							'</span><br />' +
							'</td>' +
							'</tr>' +
							'<tr>'
							if ( investment[datas[0].dataIndex].search('↓')!=-1 ) {									
								html = html +'<td><span style="color:#FF2800">'+
								investment[datas[0].dataIndex]+'</span></td>'									
							} else {
								html = html +'<td><span style="color:#009900">'+
								investment[datas[0].dataIndex]+'</span>'
							}
							if ( investmentSum[datas[0].dataIndex].search('↓')!=-1 ) {									
								html = html +'<td><span style="color:#FF2800">'+
								investmentSum[datas[0].dataIndex]+'</span></td>'									
							} else {
								html = html +'<td><span style="color:#009900">'+
								investmentSum[datas[0].dataIndex]+'</span>'
							}
							html = html+
							'</tr>' +
							'</tbody>' +
							'</table>';
					  return html
					}
				}
				
				// 观测更新的数据在 view 层可以直接访问到
				myChart.setOption(option)
			},
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				const newOption = newValue.option
				// 监听 service 层数据变更
				if (newValue.investment.length > 0) {
					const investment = newValue.investment
					const investmentSum = newValue.investmentSum
					const investmentPer = newValue.investmentPer
					// #ifdef APP-PLUS
					newOption.tooltip['formatter'] = function (datas, index) {
						let html =
							'<table style="width:100%;" cellpadding="2" cellspacing="0" align="lete" border="0" class="ke-zeroborder" bordercolor="#000000">' +
							'<tbody>' +
							'<tr>' +
							'<td>' +
							datas[0].name +
							'</td>' +
							'</tr>' +
							'<tr>' +
							'<td>' +
							'2022年计划&nbsp;'+
							datas[1].value +
							'</td>';
							
							if(investmentPer[datas[0].dataIndex] !== 'error'){
							html +='<td>' +
								'<span>预计增速指标&nbsp; ' +
								investmentPer[datas[0].dataIndex] +
								'</span><br />' +
								'</td>'
							}
							 
							 html+=
							'</tr>' +
							'<tr>' +
							'<td>' +
							'<span style="margin-right: 12px">2022年完成&nbsp; ' +
							datas[2].value +
							'</span><br />' +
							'</td>' +
							'<td>' +
							'<span>2022年累计完成&nbsp; ' +
							datas[4].value +
							'</span><br />' +
							'</td>' +
							'</tr>' +
							'<tr>' +
							'<td>' +
							'<span style="margin-right: 12px">2021年完成&nbsp; ' +
							datas[0].value +
							'</span><br />' +
							'</td>' +
							'<td>' +
							'<span>2021年累计完成&nbsp; ' +
							datas[3].value +
							'</span><br />' +
							'</td>' +
							'</tr>' +
							'<tr>'
							if ( investment[datas[0].dataIndex].search('↓')!=-1 ) {									
								html = html +'<td><span style="color:#FF2800">'+
								investment[datas[0].dataIndex]+'</span></td>'									
							} else {
								html = html +'<td><span style="color:#009900">'+
								investment[datas[0].dataIndex]+'</span>'
							}
							if ( investmentSum[datas[0].dataIndex].search('↓')!=-1 ) {									
								html = html +'<td><span style="color:#FF2800">'+
								investmentSum[datas[0].dataIndex]+'</span></td>'									
							} else {
								html = html +'<td><span style="color:#009900">'+
								investmentSum[datas[0].dataIndex]+'</span>'
							}
							html = html+
							'</tr>' +
							'</tbody>' +
							'</table>';
					  return html
					}
					// #endif
				}
				myChart.setOption(newOption)
			},
			onClick(event, ownerInstance) {
				// 调用 service 层的方法
				ownerInstance.callMethod('onViewClick', {
					id: 'echarts'+this.setting.id
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}

	.echarts {
		flex: 1;
		width: 100%;
		height: 100%;
	}
</style>
